<script>
import { payMethodList } from '@/constants'

export default {
  name: 'dialogForm',
  props: {
    scene: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      payMethodList,
      /* 表单数据对象 */
      formData: {
        personName: '',
        phoneNumber: '',
        carNumber: '',
        carBrand: '',
        cardStartDate: '',
        cardEndDate: '',
        paymentAmount: '',
        paymentMethod: ''
      },
      /* 表单规则对象 */
      formRules: {
        personName: [{ required: true, message: '请输入车主姓名', trigger: 'blur' }],
        phoneNumber: [{ required: true, message: '请输入联系方式', trigger: 'blur' }],
        carNumber: [{ required: true, message: '请输入车牌号码', trigger: 'blur' }],
        carBrand: [{ required: true, message: '请输入车辆品牌', trigger: 'blur' }],
        cardEndDate: [{ required: true, message: '请选择结束时间', trigger: 'blur' }],
        paymentAmount: [{ required: true, message: '请输入支付金额', trigger: 'blur' }],
        paymentMethod: [{ required: true, message: '请选择支付方式', trigger: 'change' }]
      },
      carTime: []
    }
  },
  methods: {
    /* 日期输入框用户确认选定的值时触发 */
    changeData([cardStartDate, cardEndDate]) {
      this.formData.cardStartDate = cardStartDate
      this.formData.cardEndDate = cardEndDate
    },
    /* 清空表单数据的回调函数 */
    resetFormData() {
      this.$refs.formRef.resetFields()
      this.formData.cardStartDate = ''
      this.formData.cardEndDate = ''
      this.carTime = []
    },
    /* 添加月卡的回调函数 */
    async doAdd() {
      try {
        const addResult = await this.$store.dispatch('monthCardStore/addCard', this.formData)
        this.$message.success(addResult)
      } catch (error) {
        this.$message.error(error.message)
      }
    },
    /* 编辑月卡的回调函数 */
    async doEdit() {
      try {
        delete this.formData.cardStatus
        const editResult = await this.$store.dispatch('monthCardStore/editCard', this.formData)
        this.$message.success(editResult)
        this.$emit('success')
      } catch (error) {
        this.$message.error(error.message)
      }
    },
    /* 续费月卡的回调函数 */
    async doRenew() {
      try {
        const { cardStartDate, cardEndDate, paymentAmount, paymentMethod, carInfoId } = this.formData
        const renewResult = await this.$store.dispatch('monthCardStore/renewCard', { cardStartDate, cardEndDate, paymentAmount, paymentMethod, carInfoId })
        this.$message.success(renewResult)
        this.$emit('success')
      } catch (error) {
        this.$message.error(error.message)
      }
    },
    /* 查找月卡的回调函数 */
    async findCard(id) {
      try {
        const formData = await this.$store.dispatch('monthCardStore/findCard', id)
        if (this.scene === 2) {
          this.formData = formData
          this.carTime = [formData.cardStartDate, formData.cardEndDate]
        } else {
          const { personName, phoneNumber, carNumber, carBrand, carInfoId } = formData
          Object.assign(this.formData, { personName, phoneNumber, carNumber, carBrand, carInfoId })
        }
      } catch (error) {
        this.$message.error(error.message)
      }
    },
    /* 点击确定按钮的回调函数 */
    async handleSubmit() {
      const valida = await this.$refs.formRef.validate().catch(error => error)
      if (!valida) return
      if (this.scene === 0) {
        this.doAdd()
      } else if (this.scene === 1) {
        this.doRenew()
      } else {
        this.doEdit()
      }
    }
  },
  emits:['success']
}
</script>

<template>
  <el-form label-width="100px" :model="formData" :rules="formRules" ref="formRef">
    <el-form-item label="车主姓名" prop="personName">
      <el-input size="small" placeholder="请输入车主姓名" v-model="formData.personName" :disabled="scene===1"></el-input>
    </el-form-item>
    <el-form-item label="联系方式" prop="phoneNumber">
      <el-input size="small" placeholder="请输入联系方式" v-model="formData.phoneNumber" :disabled="scene===1"></el-input>
    </el-form-item>
    <el-form-item label="车牌号码" prop="carNumber">
      <el-input size="small" placeholder="请输入车牌号码" v-model="formData.carNumber" :disabled="scene===1"></el-input>
    </el-form-item>
    <el-form-item label="车辆品牌" prop="carBrand">
      <el-input size="small" placeholder="请输入车辆品牌" v-model="formData.carBrand" :disabled="scene===1"></el-input>
    </el-form-item>
    <el-form-item label="支付金额" prop="paymentAmount">
      <el-input size="small" placeholder="请输入支付金额" v-model="formData.paymentAmount"></el-input>
    </el-form-item>
    <el-form-item label="支付方式" prop="paymentMethod">
      <el-select size="small" v-model="formData.paymentMethod" placeholder="请选择支付方式">
        <el-option v-for="(item) in payMethodList" :value="item.id" :label="item.name" :key="item.id"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="有效日期" prop="carTime">
      <el-date-picker size="small" v-model="carTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" @change="changeData"></el-date-picker>
    </el-form-item>
    <el-form-item>
      <el-button size="small">取消</el-button>
      <el-button type="primary" size="small" @click="handleSubmit">确定</el-button>
    </el-form-item>
  </el-form>
</template>

<style scoped lang="scss">
.el-form {
  .el-select {
    width: 100%;
  }

  .el-date-editor {
    width: 100%;

  }
}
</style>
